<template>
  <div>
    <div class="home_top">
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
    <div class="home_container">
      <div class="home_header">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item title="所有分类" @click="home_van1" />
          <van-sidebar-item title="居家" @click="home_van2" />
          <van-sidebar-item title="配件装饰" @click="home_van3" />
          <van-sidebar-item title="服装" @click="home_van4" />
          <van-sidebar-item title="电器" @click="home_van5" />
        </van-sidebar>
      </div>
      <div class="home_footer">
        <div class="hpme_weiper">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
              <img
                src="../../img/download1.jpg"
                alt=""
                height="125px"
                width="100%"
              />
            </van-swipe-item>
            <van-swipe-item>
              <img
                src="../../img/download2.jpg"
                alt=""
                height="125px"
                width="100%"
              />
            </van-swipe-item>
            <van-swipe-item>
              <img
                src="../../img/download3.jpg"
                alt=""
                height="125px"
                width="100%"
              />
            </van-swipe-item>
            <van-swipe-item>
              <img
                src="../../img/download4.jpg"
                alt=""
                height="125px"
                width="100%"
              />
            </van-swipe-item>
          </van-swipe>
        </div>
        <homeList :list="classList"></homeList>
      </div>
    </div>
  </div>
</template>
<script>
import homeList from "../../components/pluginunit/homeList";
export default {
  components: {
    homeList,
  },
  data() {
    return {
      value: "",
      activeKey: 0,
      list: [],
      classList: [],
    };
  },
  mounted() {
    this.$API
      .shop()
      .then((res) => {
        //   console.log(res);
        this.list = res.data.data;
        this.classList = res.data.data;
        console.log(this.list);
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    home_van1() {
      this.classList = this.list;
    },
    home_van2() {
      console.log(1);
      this.classList = [];
      this.list.forEach((element) => {
        this.classList = this.list.slice(0, 6);
      });
      this.classList = this.classList;
      console.log(this.classList);
    },
    home_van3() {
      this.classList = [];
      this.list.forEach((element) => {
        this.classList = this.list.slice(7, 13);
      });
      this.classList = this.classList;
      console.log(this.classList);
    },
    home_van4() {
        this.classList = [];
      this.list.forEach((element) => {
        this.classList = this.list.slice(14, 20);
      });
      this.classList = this.classList;
      console.log(this.classList);
    },
    home_van5() {
         this.classList = [];
      this.list.forEach((element) => {
        this.classList = this.list.slice(21, 26);
      });
      this.classList = this.classList;
      console.log(this.classList);
    },
  },
};
</script>
<style scoped>
.home_container {
  width: 100%;
  margin-top: 1rem;
  display: inline-flex;
  border-top: 1px solid gainsboro;
  box-sizing: border-box;
}
.home_header {
  width: 25%;
  height: 4rem;
  /* //   background-color: yellow; */
  position: fixed;
  left: 0;
}
.home_footer {
  width: 75%;

  border-left: 1px solid gainsboro;
  /* //   background-color: goldenrod; */
  box-sizing: border-box;
  margin-left: 25%;
}
.hpme_weiper {
  width: 100%;
  height: 2.6rem;
  /* //   background-color: greenyellow; */
  box-sizing: border-box;
  padding: 5px;
}
.home_tw {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  padding-bottom: 1rem;
}
.home_top {
  height: 1rem;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
}
</style>